.jsdialog-container .ui-button-box button,
.vex.vex-theme-plain .vex-dialog-button {
	font-family: var(--jquery-ui-font);
	text-transform: full-size-kana;
}

button.jsdialog {
	color: var(--color-text);
	background-color: var(--color-background);
	border: 1px solid var(--color-btn-border);
	border-radius: var(--border-radius);
	box-sizing: border-box;
}
.jsdialog *[disabled] {
	color: var(--color-text-lighter);
	border: 1px solid var(--color-btn-border-dis);
	filter: grayscale(1);
	opacity: 0.7;
}

/*limit icon to button height*/
button.jsdialog img {
	max-height: 100%;
}

.annotation-btns-container,
.vex-dialog-buttons {
	display: flex;
	flex-direction: row;
	justify-content: end;
}

[class*='button-secondary'],
.ui-pushbutton.jsdialog:not(#ok):not([id*='select_current']):not(.sidebar),
.ui-button-box.jsdialog #cancel,
.cell.jsdialog > button:not(#ok),
.ui-button-box.jsdialog button:not(#ok),
.vex.vex-theme-plain .vex-dialog-button.vex-dialog-button-secondary {
	height: 32px;
	line-height: 0em;
	color: var(--color-main-text);
	font-size: var(--default-font-size);
	min-width: 62px;
	background-color: var(--color-background-dark);
	border: 1px solid var(--color-border-dark);
	border-radius: var(--border-radius);
	margin: 5px;
	vertical-align: middle;
}

[class*='button-secondary']:hover,
.ui-pushbutton.jsdialog:not(#ok):not(.sidebar):hover,
.ui-button-box.jsdialog #cancel:hover,
.cell.jsdialog > button:not(#ok):hover,
.ui-button-box.jsdialog button:not(#ok):hover,
.vex.vex-theme-plain .vex-dialog-button.vex-dialog-button-secondary:hover {
	cursor: pointer;
	color: var(--color-text-darker) !important;
	background-color: var(--color-background-lighter) !important;
	border: 1px solid var(--color-border-darker);
}

.ui-button-box.jsdialog #ok,
[class*='button-primary'],
.cell.jsdialog > button,
.ui-button-box.jsdialog button,
.vex.vex-theme-plain .vex-dialog-button.vex-dialog-button-primary {
	height: 32px;
	line-height: 0em;
	color: var(--color-primary-text);
	min-width: 62px;
	background-color: var(--color-primary);
	border: 1px solid var(--color-primary-dark);
	border-radius: var(--border-radius);
	margin: 5px;
	vertical-align: middle;
}

button#ok:hover,
.cell.jsdialog > button:hover,
.ui-button-box.jsdialog button:hover,
[class*='button-primary']:hover {
	background-color: var(--color-primary-lighter);
}

.vex.vex-theme-plain .vex-dialog-form .vex-dialog-buttons {
	margin-right: -5px; /* Account for child element (button)'s margin */
}

.jsdialog.ui-button-box.end {
	margin-top: 8px;
	display: flex;
	justify-content: space-between;
}

.jsdialog.ui-button-box button[disabled='disabled'] {
	color: var(--color-text-lighter) !important;
	background-color: var(--color-background-lighter) !important;
	border-color: var(--color-border-lighter) !important;
}

.ui-button-box .jsdialog.ui-pushbutton:not(.hidden) {
	display: initial !important;
}

/* button box */

.jsdialog.ui-button-box-right {
	display: flex;
	float: inline-end;
}

.jsdialog.ui-button-box-left {
	float: inline-start;
}
